<template>
  <div class="resume-container">
    <!-- 导出操作栏 -->
    <div class="operation-bar">
      <el-button type="primary" icon="el-icon-download" @click="exportPDF">导出PDF</el-button>
      <!-- <el-button icon="el-icon-document" @click="exportWord">导出Word</el-button> -->
    </div>

    <!-- 简历主体卡片 -->
    <el-card class="resume-card">
      <!-- 头部信息 -->
      <div class="header-section">
        <img :src="'https://xit-edu.cn/2502boleapi'+resume.avatar" style="width: 7vw;margin-right: 4vw;" alt="">
        <!-- <el-avatar :size="120" :src="'https://xit-edu.cn/2502boleapi'+resume.avatar" class="avatar-box" /> -->
        <!-- <el-avatar :size="120" :src="resume.avatar" class="avatar-box" /> -->
        <div class="base-info">
          <h1 class="text-gradient">{{ resume.name }}</h1>
          <div class="meta-badges">
            <el-tag type="info">{{ resume.gender }}</el-tag>
            <el-tag v-if="resume.birthDate" type="success">{{ age }}岁</el-tag>
            <el-tag type="warning">{{ resume.jobTarget }}</el-tag>
          </div>
          <div class="contact-info">
            <p><i class="el-icon-phone"></i> {{ resume.phone }}</p>
            <p><i class="el-icon-message"></i> {{ resume.email }}</p>
            <p v-if="resume.website">
              <i class="el-icon-link"></i>
              <a :href="resume.website" target="_blank">{{ resume.website }}</a>
            </p>
          </div>
        </div>
      </div>

      <!-- 时间轴布局 -->
      <el-timeline>
        <!-- 教育经历 -->
        <el-timeline-item
          v-for="edu in resume.educations"
          :key="edu.id"
          :timestamp="formatDateRange(edu.startDate, edu.endDate)"
          placement="top"
          type="primary"
          color="#409EFF"
        >
          <el-card class="edu-card">
            <h3>{{ edu.school }}</h3>
            <p class="degree">{{ edu.degree }} · {{ edu.major }}</p>
            <p class="remarks" v-if="edu.remarks">{{ edu.remarks }}</p>
          </el-card>
        </el-timeline-item>

        <!-- 工作经历 -->
        <el-timeline-item
          v-for="work in resume.workExperiences"
          :key="work.id"
          :timestamp="formatDateRange(work.startDate, work.endDate)"
          placement="top"
          type="success"
        >
          <el-card class="work-card">
            <h3>{{ work.company }} - {{ work.position }}</h3>
            <div class="achievements" v-html="work.achievements"></div>
            <el-tag v-if="work.remarks" type="info">{{ work.remarks }}</el-tag>
          </el-card>
        </el-timeline-item>
      </el-timeline>

      <!-- 项目经历 -->
      <el-collapse v-model="activeCollapse" class="project-section">
        <el-collapse-item
          v-for="(project, index) in resume.projects"
          :key="project.id"
          :name="index"
          class="project-item"
        >
          <template slot="title">
            <i class="el-icon-folder-opened"></i>
            <span class="project-title">{{ project.name }}</span>
            <el-tag size="mini">{{ project.role }}</el-tag>
          </template>
          <div class="project-content">
            <p class="description">{{ project.description }}</p>
            <div class="achievements" v-html="project.achievements"></div>
          </div>
        </el-collapse-item>
      </el-collapse>

      <!-- 荣誉奖项 -->
      <div class="honor-section">
        <h2 class="section-title"><i class="el-icon-trophy"></i> 荣誉奖项</h2>
        <el-row :gutter="20">
          <el-col
            v-for="honor in resume.honors"
            :key="honor.id"
            :xs="24" :sm="12" :md="8"
          >
            <el-card shadow="hover" class="honor-card">
              <div slot="header" class="honor-header">
                <span>{{ honor.name }}</span>
                <el-tag type="danger" size="mini">荣誉</el-tag>
              </div>
              <p class="obtain-date">{{ formatDate(honor.obtainDate) }}</p>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { exportPdf, exportWord } from '@/utils/exportUtil'
import dayjs from 'dayjs'

export default {
  props: {
    resume: {
      type: Object,
      required: true,
      default: () => ({
        educations: [],
        workExperiences: [],
        projects: [],
        honors: []
      })
    }
  },
  data() {
    return {
      activeCollapse: [],
      avatarUrl: require('@/assets/default-avatar.png')
    }
  },
  computed: {
    age() {
      return this.resume.birthDate
        ? dayjs().diff(dayjs(this.resume.birthDate), 'year')
        : '--'
    }
  },
  methods: {
    formatDate(date) {
      return date ? dayjs(date).format('YYYY-MM') : '至今'
    },
    formatDateRange(start, end) {
      return `${this.formatDate(start)} ~ ${this.formatDate(end)}`
    },
    exportPDF() {
      exportPdf(this.$el, `${this.resume.name}_简历`)
    },
    exportWord() {
      const templateData = {
        ...this.resume,
        educations: this.resume.educations.map(edu => ({
          ...edu,
          period: this.formatDateRange(edu.startDate, edu.endDate)
        }))
      }
      exportWord(templateData, 'resume-template.docx')
    }
  }
}
</script>

<style lang="scss" scoped>
.resume-container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;

  .operation-bar {
    margin-bottom: 20px;
    text-align: right;
  }

  .resume-card {
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

    .header-section {
      display: flex;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #ebeef5;

      .avatar-box {
        margin-right: 40px;
        // border: 4px solid #f5f7fa;
      }

      .base-info {
        flex: 1;

        .text-gradient {
          background: linear-gradient(45deg, #409EFF, #67C23A);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 32px;
          margin-bottom: 10px;
        }

        .meta-badges {
          margin: 15px 0;

          .el-tag {
            margin-right: 10px;
            font-size: 14px;
          }
        }

        .contact-info {
          color: #909399;

          i {
            margin-right: 5px;
          }

          a {
            color: inherit;
            text-decoration: none;

            &:hover {
              color: #409EFF;
            }
          }
        }
      }
    }

    .project-section {
      margin: 20px 0;

      .project-title {
        margin-left: 10px;
        font-weight: bold;
      }

      .project-content {
        padding: 10px 30px;

        .description {
          color: #666;
          line-height: 1.8;
        }
      }
    }

    .honor-section {
      margin-top: 30px;

      .section-title {
        color: #e6a23c;
        font-size: 24px;
        margin-bottom: 20px;

        i {
          margin-right: 10px;
        }
      }

      .honor-card {
        margin-bottom: 20px;

        .honor-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .obtain-date {
          color: #909399;
          font-size: 12px;
        }
      }
    }
  }

  // 时间轴样式覆盖
  ::v-deep .el-timeline {
    padding: 20px 40px;

    .el-timeline-item__timestamp {
      font-size: 16px;
      color: #606266;
    }

    .edu-card, .work-card {
      margin: 10px 0;

      h3 {
        color: #303133;
        margin-bottom: 8px;
      }

      .degree {
        color: #409EFF;
        font-weight: 500;
      }

      .remarks {
        color: #909399;
      }
    }
  }
}
</style>
